<template>
  <div style="padding: 20px;">
    <!--<Breadcrumb style="margin-bottom: 20px;">-->
      <!--<BreadcrumbItem to="/">-->
        <!--<Icon type="ios-home-outline"></Icon> 首页-->
      <!--</BreadcrumbItem>-->
      <!--<BreadcrumbItem to="">-->
        <!--<Icon type="ios-folder-open"></Icon> 门店管理-->
      <!--</BreadcrumbItem>-->
    <!--</Breadcrumb>-->
    <Row>
      <i-col span="24">
        <Input placeholder="搜索分类名称" v-model="searchClassFication" style="width: 150px;margin-bottom: 10px" />
        <Button style="margin: 0 10px 10px 0;" type="primary" @click="searchShop">搜索</Button>
        <Button style="margin: 0 10px 10px 0;float: right;" type="primary" @click="addShop">添加分类</Button>
      </i-col>
      <i-col span="24">
        <Table border :columns="shopTitle" :data="shopList"></Table>
        <Page :total="total" show-elevator @on-change="pageChange" style="text-align:right;margin-top: 15px;"/>
      </i-col>
    </Row>
    <Modal v-model="addClassFication" :title="title" :width="750" @on-ok="sbtShop(title)" @on-cancel="empty" :mask-closable="false">
      <Form :model="classFication" :label-width="80">
        <FormItem label="分类名称">
          <Input v-model="classFication.typeName" placeholder="请输入分类名称" />
        </FormItem>
        <FormItem label="分类描述">
          <Input v-model="classFication.typeDesc" type="textarea" :autosize="{minRows: 2,maxRows: 3}" placeholder="分类描述"/>
        </FormItem>
        <FormItem label="设置禁启">
          <i-switch size="large" v-model="classFication.typeStatus"  @on-change.self="typeStatusChange">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import {formatDate} from '@/config/date'
  export default {
    name: 'shop',
    data () {
      return {
        addClassFication: false,
        title: '',
        number: 1,
        total: 0,
        searchClassFication: '',
        classFication: {
          typeName: '',
          typeDesc: '',
          typeStatus: true
        },
        shopTitle: [
          {
            title: '分类编号',
            align: 'center',
            key: 'typeShowId',
            tooltip: true
          },
          {
            title: '分类名称',
            align: 'center',
            key: 'typeName',
            tooltip: true
          },
          {
            title: '分类描述',
            align: 'center',
            tooltip: true,
            key: 'typeDesc'
          },
          {
            title: '添加时间',
            tooltip: true,
            align: 'center',
            render: (h, params) => {
              return h('div', formatDate(new Date(params.row.typeCreateTime), 'yyyy-MM-dd hh:mm')
              )
            }
          },
          {
            title: '更新时间',
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              if (params.row.typeUpdateTime) {
                return h('div', formatDate(new Date(params.row.typeUpdateTime), 'yyyy-MM-dd hh:mm')
                )
              } else {
                return h('div')
              }
            }
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              const row = params.row
              const color = row.typeStatus === 1 ? 'primary' : row.typeStatus === 0 ? 'error' : ''
              const text = row.typeStatus === 1 ? '正常' : row.typeStatus === 0 ? '禁用' : ''
              return h('Tag', {
                props: {
                  type: 'dot',
                  color: color
                }
              }, text)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editorShow()
                      this.classFication.typeName = params.row.typeName
                      this.classFication.typeDesc = params.row.typeDesc
                      this.classFication.typeId = params.row.typeId
                      if (params.row.typeStatus === 1) {
                        this.classFication.typeStatus = true
                      } else {
                        this.classFication.typeStatus = false
                      }
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '你确定删除该用户吗？',
                        okText: '确定',
                        cancelText: '取消',
                        onOk: () => {
                          let row = params.row
                          this.removeClass(row.typeId)
                        }
                      })
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        shopList: []
      }
    },
    mounted () {
      this.classList(this.number)
    },
    methods: {
      classList (number) {
        let url = '/api/goods/type/page'
        let from = {
          typeName: this.searchClassFication,
          pageSize: 10,
          pageNumber: number
        }
        this.$get(url, from).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.shopList = res.data.data
            this.total = res.data.count
          }
        })
      },
      showModel (title) {
        this.addClassFication = true
        this.title = title
      },
      addShop () {
        this.showModel('添加分类')
      },
      editorShow () {
        this.showModel('编辑分类')
      },
      typeStatusChange (status) {
        this.classFication.typeStatus = status
      },
      sbtShop (title) {
        if (title === '添加分类') {
          this.classFicationAdd()
        } else {
          this.submitEdit()
        }
      },
      classFicationAdd () {
        let url = '/api/goods/type/add'
        let from = {
          typeName: this.classFication.typeName,
          typeDesc: this.classFication.typeDesc,
          typeStatus: Number(this.classFication.typeStatus)
        }
        this.$post(url, from).then((res) => {
          if (res.code === 200) {
            this.$Message.success('添加成功')
            this.classList(this.number)
            this.classFication = {}
            this.classFication.typeStatus = true
          } else {
            this.$Message.error('添加失败')
          }
        })
      },
      submitEdit () {
        let url = '/api/goods/type/update'
        let from = {
          typeId: this.classFication.typeId,
          typeName: this.classFication.typeName,
          typeDesc: this.classFication.typeDesc,
          typeStatus: Number(this.classFication.typeStatus)
        }
        this.$put(url, from).then((res) => {
          if (res.code === 200) {
            this.$Message.success('修改成功')
            this.classList(this.number)
            this.classFication = {}
            this.classFication.typeStatus = true
          } else if (res.code === 400) {
            this.$Message.error('分类名称重复')
          } else {
            this.$Message.error('修改失败')
          }
        })
      },
      searchShop () {
        if (!this.searchClassFication) {
          this.$Message.warning('请输入查询条件')
          return
        }
        this.classList(this.number)
      },
      removeClass (id) {
        let url = '/api/goods/type/delete'
        let from = {
          typeId: id
        }
        this.$deletes(url, from).then((res) => {
          if (res.code === 200) {
            this.$Message.success('删除成功')
            this.classList(this.number)
          } else {
            this.$Message.error('删除失败')
          }
        })
      },
      pageChange (change) {
        let number = change
        this.number = number
        this.classList(number)
      },
      empty () {
        this.classFication = {}
        this.classFication.typeStatus = true
      }
    }
  }
</script>

<style scoped>
  .ivu-row {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .selector .ivu-row ivu-col-span-8{
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 33% !important;
  }
</style>
